<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

  <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  <title>Document</title>
  <style>
    body {
      background: url('background/background-login.png') no-repeat;
      background-size: cover;
    }
    @keyframes slide-in-up {
      from {
        transform: translateY(100%);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
    #login_box {
      width: 30%;
      height: 450px;
      background-color: rgb(255, 255, 255,0.38);
      margin: auto;
      margin-top: 10%;
      text-align: center;
      border-radius: 10px;
      padding: 50px 50px;
      animation: slide-in-up 0.5s ease-in-out forwards;
    }

    h2 {
      color: #ffffff90;
      margin-top: 5%;
    }

    h3 {
      color: whitesmoke;
    }
    #input-box {
      margin-top: 5%;
    }

    span {
      color: #fff;
    }

    input {
      border: 0;
      width: 60%;
      font-size: 15px;
      color: #fff;
      background: transparent;
      border-bottom: 2px solid #fff;
      padding: 5px 10px;
      outline: none;
      margin-top: 10px;
    }

    button {
      margin-top: 50px;
      width: 60%;
      height: 30px;
      border-radius: 10px;
      border: 0;
      color: #fff;
      text-align: center;
      line-height: 30px;
      font-size: 15px;
      background-image: linear-gradient(to right, #40fff8, #b6ff7d);
    }
    #btn_changepwd:hover {
      background-image: linear-gradient(to right, rgba(43, 255, 247, 0.45), #40fff8);
      color: #868c8c;
    }
    #sign_up {
      margin-top: 45%;
      margin-left: 60%;
    }

    a {
      color: #b94648;
    }
    ::placeholder
    {
      color: beige;
    }



    /* 调整模态框的宽度 */
    #questionModal .modal-dialog {
      max-width: 500px;
    }

    /* 调整模态框中的文本样式 */
    #questionModal p.question-label {
      font-weight: bold;
    }

    /* 调整“答案”文本框的宽度 */
    #answer {
      width: 100%;
    }

    /* 调整“取消”和“确认”按钮的样式 */
     .modal-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

     .modal-footer .btn-secondary {
      background-color: white;
      border: 1px solid black;
      color: black;
    }

     .modal-footer .btn-primary {
      background-color: black;
      border: none;
    }
    input::placeholder {
      color: #948f8f;
    }

  </style>
</head>

<body>
<div id="login_box">
  <h2>修改密码</h2>
  <form id="changepwdForm">
    <div class="input_box">
      <label>

        <input type="text" placeholder="请输入用户名" name="user" id = "username">
      </label>
    </div>
    <button type="button" id="btn_changepwd">确定</button>
    <br><br>
    <h3><a href="login.html">点此返回</a></h3>
  </form>
</div>
<!-- 模态窗口代码，使用Bootstrap的Modal组件 -->
<div class="modal fade" id="questionModal" tabindex="-1" aria-labelledby="questionModalLabel" aria-hidden="true"  style="display:none;">>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="questionModalLabel">找回密码</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p><strong>问题:</strong> <span id="question" style="color: black"></span></p>
        <p><strong>答案:</strong> <input type="text" id="answer" style="color: black"></p>
      </div>
      <div class="modal-footer d-flex justify-content-between">
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary btn-sm" id="btn_check_answer">确认</button>
      </div>
    </div>
  </div>
</div>


<!-- 修改密码的模态框 -->
<div id="changePasswordModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">修改密码</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="changePasswordForm">
          <label for="passwordInput">输入密码：</label>
          <input type="password" name="password" id="passwordInput" autocomplete="off" class="form-control" required>
          <br>
          <label for="confirmPasswordInput">确认密码：</label>
          <input type="password" name="confirmPassword" id="confirmPasswordInput" autocomplete="off" class="form-control" required>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="submit" class="btn btn-primary" id="btn_save_password">保存</button>
      </div>
    </div>
  </div>
</div>
<script>
   var username;
  $("#btn_changepwd").click(function () {
    username = document.getElementById("username").value;
    console.log(username);
    $.get("changepwd?",$("#changepwdForm").serialize(),function(res){
      if (res.question != null){
       //在此弹出模态窗口
        //弹出模态窗口
        $("#question").text(res.question);
        $("#questionModal").modal("show");
        //$("#question").text(res.)
      } else {
        alert("无此用户！");
      }
    },"json");
  });

  // 获取确认按钮元素和答案文本框元素
  const btnCheckAnswer = document.querySelector("#btn_check_answer");
  const answerInput = document.querySelector("#answer");

  // 当确认按钮点击时
  btnCheckAnswer.addEventListener("click", () => {
    // 获取用户输入的答案和问题
    const answer = answerInput.value;
    const question = document.querySelector("#question").textContent;

    // 发送数据到服务器进行验证
    $.get("/questionok", { username: username, question: question, answer: answer }, (data) => {
      if (data == true) {
        // 如果验证通过，则弹出修改密码的模态框
        $('#questionModal').modal('hide');
        $('#changePasswordModal').modal('show');

        // 在修改密码的模态框中，让输入框获取焦点
        document.querySelector('#passwordInput').focus();
      } else {
        // 如果验证不通过，则提示用户并清空答案文本框
        alert("答案不正确，请重新输入");
        answerInput.value = "";
      }
    }, "json");
  });

   // 获取保存按钮元素和输入密码文本框元素
   const btnSavePassword = document.querySelector("#btn_save_password");
   const passwordInput = document.querySelector("#passwordInput");
   const confirmPasswordInput = document.querySelector("#confirmPasswordInput");

   // 当保存按钮点击时
   btnSavePassword.addEventListener("click", () => {
     // 验证两次输入的密码是否一致
     if (passwordInput.value !== confirmPasswordInput.value) {
       alert("两次输入的密码不一致，请重新输入。");
       passwordInput.value = "";
       confirmPasswordInput.value = "";
       passwordInput.focus();
       return;
     }

     // 发送数据到服务器进行保存
     const password = passwordInput.value;
     const confirmPassword = confirmPasswordInput.value;
     const data = { username: username, pwd1: password, pwd2: confirmPassword };
     $.post("/change", data, (data) => {
       if (data == true) {
         alert("密码修改成功！");
         $('#changePasswordModal').modal('hide');
       } else {
         alert("密码修改失败，请重试。");
       }
     }, "json");
   });
</script>